<template>
  <el-button
    type="primary"
    :style="btnStyle"
    :loading="isLoading"
    @click="_confirmEvent"
  >
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  props: {
    btnStyle: {
      type: String
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    _confirmEvent() {
      if (this.loading) {
        if (this.isLoading) {
          return null;
        }
        this.isLoading = true;
      }
      //触发回调
      this.$emit("confirmEvent", () => {
        this.done();
      });
    },
    done() {
      this.isLoading = false;
    }
  },
  created() {}
};
</script>

<style scoped  lang="scss" scoped>
.icon-loading {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(222, 71, 67, 1);
  height: 84rpx;
  font-size: 32rpx;
  font-weight: 400;
  letter-spacing: 3rpx;
}

.button-loading {
  background: rgba(222, 71, 67, 0.7);
}
</style>
